import useMounted from "./useMounted"
import useUnMounted from "./useUnMounted"
import { config } from "@/utils/setting"

const RIPPLE_NAME = 'use-ripple'
let RippleWatch = null

const ripple = (el, showRipple, options = {}) => {
    const { center = false, color = "rgb(30 184 245 / 70%)", size = 20 } = options
    const rippleShow = ref(showRipple)
    const isBody = document.body === el
    el.setAttribute("data-ripple", isBody ? false : rippleShow.value)

    if (!RippleWatch) {
        RippleWatch = watch(() => config.value.showElRipple, show => {
            for (const rippleEle of document.querySelectorAll("[data-ripple]:not(body)")) {
                rippleEle.setAttribute("data-ripple", show)
            }
        })
    }

    const createEleRipple = (e) => {
        // 获取鼠标点击全局坐标
        const { clientX, clientY, pointerType } = e;
        if (!pointerType) return
        // body时，避免和元素的波纹冲突
        if (isBody) {
            for (let ele of document.querySelectorAll("[data-ripple=true]")) {
                if (ele.contains(e.srcElement)) return
            }
        }
        if (!rippleShow.value) return
        // 设置按钮overflow
        el.style.overflow = isBody ? el.style.overflow : "hidden";
        // 获取按钮的长宽
        const { clientWidth, clientHeight } = el;
        // 算出直径
        const diameter = isBody ? size : Math.ceil(Math.sqrt(clientWidth ** 2 + clientHeight ** 2));
        // 算出半径
        const radius = diameter / 2;
        // 获取按钮的全局坐标
        const { left, top, width, height } = isBody ? { left: 0, top: 0 } : el.getBoundingClientRect();
        // 设置按钮的定位是relative
        const position = el.style.position;
        if ((!position || position === 'static') && !isBody) {
            el.style.position = 'relative';
        }


        // 创建一个圆dom
        const rippleDiv = document.createElement('div');
        // 插入圆dom
        el.appendChild(rippleDiv);

        rippleDiv.className = RIPPLE_NAME
        // 设置长宽
        rippleDiv.style.width = rippleDiv.style.height = `${diameter}px`;
        rippleDiv.style.left = center && !isBody ? `${width / 2 - radius}px` : `${clientX - radius - left}px`;
        rippleDiv.style.top = center && !isBody ? `${height / 2 - radius}px` : `${clientY - radius - top}px`;
        rippleDiv.style.backgroundColor = color
        rippleDiv.style.zIndex = isBody ? 9999999 : "auto"
        setTimeout(() => {
            rippleDiv.className = `${RIPPLE_NAME} active`
        });
        rippleDiv.addEventListener("animationend", () => {
            rippleDiv.remove()
        }, { once: true })
    }
    el.addEventListener("click", createEleRipple, true)
    return () => {
        el.removeEventListener("click", createEleRipple, true)
    }
}

const useRipple = (el, ...args) => {
    let showRipple = null
    let options = {}
    if (args.length === 1) {
        const argIsObject = typeof args[0] === 'object'
        showRipple = argIsObject ? null : args[0]
        options = (argIsObject ? args[0] : null) || {}
    } else if (args.length === 2) {
        showRipple = args[0]
        options = args[1] || {}
    }
    const start = () => {
        const stop = []
        const show = toRef(showRipple === null || showRipple === undefined ? document.body === el ? () => config.value.showMouseRipple : () => config.value.showElRipple : showRipple)
        nextTick(() => {
            if (typeof el === "string") {
                for (let ele of document.querySelectorAll(el)) {
                    stop.push(ripple(ele, show, options))
                }
            } else {
                stop.push(ripple(el, show, options))
            }
        })
        return stop
    }

    const remove = useMounted(start)
    useUnMounted(() => {
        for (let removeRipple of remove.value) {
            removeRipple()
        }
    })
}

export default useRipple